<template>
  <el-dialog
    :visible.sync="dialogVisible"
    style="padding:0;"
    width="30%"
    title="详情"
  >
    <div 
      v-for="(item,index) in detailList"
      :key="index"
      :class="{'item' : index !== 0}"
      class="everyitem"
    >
      <div class="itemspaceBetween">
        <div>联系人：</div>
        <div>{{item.receiverName}}</div>
      </div>
      <div class="itemspaceBetween">
        <div>联系方式：</div>
        <div>{{item.receiverMobile}}</div>
      </div>
      <div class="itemspaceBetween">
        <div>服务地址：</div>
        <div>{{item.receiverAddress}}</div>
      </div>
      <!-- <div class="itemspaceBetween">
        <div>服务类型：</div>
        <div>{{item.serveType}}</div>
      </div> -->
      <div class="itemspaceBetween">
        <div>服务时间：</div>
        <div>{{item.serviceHours}}</div>
      </div>
      <div class="itemspaceBetween">
        <div>服务状态：</div>
        <div>{{item.serviceStatus}}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props:['isShow','detailList'],
  data() {
    return {
      dialogVisible: false
    }
  },
  watch:{
    isShow(newvalue) {
      this.dialogVisible = newvalue
    },
    dialogVisible(newvalue) {
      if(newvalue === false) {
        this.$emit("changeFalse", newvalue)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.itemspaceBetween{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.item{
  border-top: 1px solid #E8E8E8;
}
.everyitem{
  padding: 20px 0;
}
/deep/ .el-dialog__body{
  padding: 0 30px;
}
</style>